:host {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 70px;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

.info-card {
  position: fixed;
  bottom: 20px;
  width: 100%;
  height: 50px;
  color: #fff;
  font-size: 18px;
  line-height: 50px;
  background-color: #2971d3;
}

.container {
  width: 100%;
  height: calc(100% - 80px);

  .header {
    flex-basis: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }

  .in-user,
  .out-user {
    height: 100%;

    &>div {
      flex-direction: column;
      height: 100%;
    }

    .info-box {
      flex: 1;

      &>div {
        height: 100%;
        padding: 20px 0;

        .info-item {
          height: 100%;
          text-align: center;
          border-radius: 5px;

          .user-photo {
            padding: 5px;

            img {
              width: calc(100% - 10px);
              border: solid 5px #fff;
            }
          }

          .user-info {
            .username {
              font-size: 20px;
              font-weight: bold;

            }

            .department,
            .userid {
              font-size: 18px;
              font-weight: bold;

            }
          }

          .user-date {
            font-size: 18px;
          }

          .user-date,
          .user-info,
          .user-photo {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          }
        }

        &:nth-child(1) {
          padding-right: 10px;

          .info-item {
            background-color: #2586e9;
          }
        }

        &:nth-child(2) {
          padding-right: 10px;
          padding-left: 10px;

          .info-item {
            background-color: #30b4b8;
          }
        }

        &:nth-child(3) {
          padding-left: 10px;

          .info-item {
            background-color: #9399b2;
          }
        }
      }
    }
  }

  .in-user {
    .header {
      background-color: #21988c;
    }
  }

  .out-user {
    .header {
      background-color: #a65578;
    }
  }
}
